<template>
    <ul v-for="item in State">
        <li>姓名:{{ item.name }}</li>
        <li>年龄:{{ item.Age }}</li>
    </ul>

    <table>
        <thead style="background-color: aqua;">
            <tr>
                <th>用户借款编号</th>
                <th>借款用户账号</th>
                <th>借款款项名称</th>
                <th>借款金额</th>
                <th>剩余还款本金</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in Info">
                <td>{{ item.UBId }}</td>
                <td>{{ item.UId }}</td>
                <td>{{ item.Name }}</td>
                <td>{{ item.Money }}</td>
                <td>{{ item.SMoney }}</td>
            </tr>
        </tbody>

    </table>

    <h1>{{ Wx }}</h1>

</template>

<script setup lang="ts">

import {ref} from 'vue';

const State = [
    {
        name:'张大',
        Age:21,
    },
    {
        name:'李尔',
        Age:20,
    },
    {
        name:'刘珊',
        Age:22,
    },
    {
        name:'钱嗣',
        Age:25,
    },
    {
        name:'赵武',
        Age:24,
    },
]

const Info = ref([
    {
        UBId:1,
        UId:'zhangsan',
        Name:'八维助学金',
        Money:400,
        SMoney:0
    },
    {
        UBId:2,
        UId:'zhangsan',
        Name:'八维助学金',
        Money:10000,
        SMoney:10000
    },
])

const Wx = '双向数据绑定演示';

</script>
